<template>
  <div class="bott">
    <div class="bott_top">
      <div>
        <div class="top_name" style="float: left;width: 195px;color: #000;">
          <span>{{ username }}</span>
          您好！
        </div>
        <div class="top_money" style="float: left;width: 450px;color: #000;">
          <b>
            可用资金
            <span>{{ parseFloat(param.money_ke || 0).toFixed(2) }} (美元)</span>
          </b>
        </div>
      </div>
      <div class="imgzong">
        <!-- <button class="but_s" @click="refresh()">刷新</button> -->
        <button class="but_s" @click="locking()">锁定</button>
        <img @click="onsuo()" class="imgdang1" src="../assets/xinimg/suoxiao2.png" />
        <img @click="onfang()" class="imgdang" src="../assets/xinimg/suofang.png" />
        <img @click="signout()" class="imgdang" src="../assets/xinimg/guanbi2.png" />
      </div>
    </div>
    <div class="bott_in">
      <div class="bott_left">
        <img class="bott_lef_img" src="../assets/xinimg/pailie2.png" alt="" />
        <div class="bott_lef_font">
          <span class="bott_lef_font_span" :class="isindex == index ? 'font_bg' : ''" v-for="(item, index) in typelist" :key="index" @click="tabbot(item, index)">
            {{ item.name }}
          </span>
        </div>
      </div>
      <div class="bott_right">
        <div class="rig_xiadan" v-if="isxiadan"><footerleft></footerleft></div>
        <div class="rig_zhong" v-if="is_zhong"></div>
        <div class="rig_jilu">
          <!--交易-->
          <div class="transaction" v-if="Fkey1 == 1"><transaction></transaction></div>

          <!--当日委托-->
          <div class="transaction" v-if="Fkey1 == 2"><entrust></entrust></div>

          <!--当日成交-->
          <div class="transaction" v-if="Fkey1 == 3"><dealtoday></dealtoday></div>

          <!--持仓-->
          <div class="transaction" v-if="Fkey1 == 4"><holdpositions></holdpositions></div>

          <!--查询-->
          <div class="transaction" v-if="Fkey1 == 5"><query></query></div>

          <!-- 实名认证 -->
          <div class="transaction" v-if="Fkey1 == 6"><realname></realname></div>

          <!-- 公共说明 notice -->
          <div class="transaction" v-if="Fkey1 == 7" style="box-sizing: border-box;padding: 10px;color: #000000;"><notice></notice></div>

          <!-- 转账 -->
          <div class="transaction" v-if="Fkey1 == 8" style="box-sizing: border-box;padding: 10px;color: #000000;"><transferaccounts></transferaccounts></div>

          <!-- 修改密码 -->
          <div class="transaction" v-if="Fkey1 == 9" style="box-sizing: border-box;padding: 10px;color: #000000;"><passwords></passwords></div>
        </div>
      </div>
    </div>

    <!-- 全部平仓modal -->
    <!-- <el-dialog title="确认全平" :visible.sync="dialogVisible" width="30%" style="z-index: 999999999999;">
			<span>确认平掉所有持仓？</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="cloposion()">确 认</el-button>
			</span>
		</el-dialog> -->

    <!-- <div v-if="disprofit" style="position: fixed;top: 0;bottom: 0;left: 0;right: 0;z-index: 100;"><points></points></div> -->

    <!-- <div v-if="alertborder" class="al_border">
      <div class="iframe_border"><iframe :src="chongzhiurl" width="100%" height="100%"></iframe></div>
      <div class="al_btn" @click="alertborder = false">关闭</div>
    </div>realname -->
  </div>
</template>

<script>
import { mapState } from 'vuex';
import transaction from '@/components/foot/transaction.vue'; //交易
import entrust from '@/components/foot/entrust.vue'; //委托
import dealtoday from '@/components/foot/deal_today.vue'; //成交
import holdpositions from '@/components/foot/hold_positions.vue'; //持仓
import query from '@/components/foot/query.vue'; //查询
import realname from '@/components/foot/realname.vue'; //实名
import notice from '@/components/foot/notice.vue'; //公告
import transferaccounts from '@/components/foot/transferaccounts.vue'; //转账
import passwords from '@/components/foot/password.vue'; //密码
import footerleft from '@/components/foot/footerleft.vue'; //下单 realname
import points from '@/components/foot/points.vue'; //设置
export default {
  computed: mapState({
    select: state => state.trade.select,
    /* 当前选中股指 */
    symbol: state => state.trade.symbol,
    /* 全部行情 */
    symbos: state => state.trade.symbos,
    /* 当前页面显示杨青 */
    ticket: state => state.trade.ticket,
    /* 推送数据 */
    //disprofitx: state => state.alertborder, /*, 止盈止损弹出框 */
    userInfo: state => state.userInfo
    /* 用户信息 */
  }),
  watch: {
    // disprofitx(val){
    //   this.disprofit=val;
    // },
    ticket(val) {
      // this.getusermouny();
    }
  },
  components: {
    transaction,
    entrust,
    dealtoday,
    holdpositions,
    query,
    notice,
    transferaccounts,
    realname,
    passwords,
    footerleft
    // points,
  },
  data() {
    return {
      gonglist: [], //公告信息
      alertborder: false,
      chongzhiurl: null,
      dialogtuichu: false, //退出弹出框
      typelist: [
        {
          name: '交易',
          id: '1'
        },
        {
          name: '当日委托',
          id: '2'
        },
        {
          name: '当日成交',
          id: '3'
        },
        {
          name: '持仓',
          id: '4'
        },
        {
          name: '查询',
          id: '5'
        },
        {
          name: '实名认证',
          id: '6'
        },
        // {
        //   name: '公告说明',
        //   id: '7'
        // },
        {
          name: '银期转账',
          id: '8'
        },
        {
          name: '修改密码',
          id: '9'
        }
      ],
      holdlist: [], //持仓列表
      order_list_condition: [], //条件单、委托
      order_list_deal: [], //当日成交
      isindex: 0,
      isxiadan: true,
      Fkey1: 1,
      iscance2: true,
      iscance1: false,
      is_zhong: true,
      disprofit: false, //止盈止损设置
      status: [
        {
          title: '资金状态',
          id: '1'
        },
        {
          title: '结算单',
          id: '2'
        },
        {
          title: '持仓明细',
          id: '3'
        }
      ],
      param: {},
      /* 用户资金状态 */
      username: '',
      isstatu: 0,
      dialogVisible: false,
      activeClass1: -1, //我的持仓
      activeClass2: -1, //我的条件单、委托
      activeClass3: -1, //当日成交
      holdid: '', //持仓id
      condition_id: '', //委托单id
      Fkeystu: false,
      parampass: {
        cur_password: '',
        password: '',
        password_confirm: ''
      },
      disfooter: false,
      dealdey: 'detailed',
      disstatus: 1,
      capitaltime: '',
      timesin1: '',
      dang_qian_quan_yi: '--', //当前权益
      account: '--', //可用资金
      ping_cang_ying_kui: '--', //平仓盈亏
      shou_xu_fei: '--', //手续费
      bao_zheng_jin: '--', //保证金
      dong_jie_bao_zheng_jin: '--', //冻结保证金
      dong_jie_zi_jin: '--', //冻结资金
      ru_jin: '--', //入金金额
      xin_yong_e_du: '--', //信用金额
      keyong: '--', //可取资金
      chicangyingkui: '--', //持仓盈亏
      fengxian: '--', //风险度
      dong_jie_shou_xu_fei: '--', //冻结手续费
      chu_jin: '--', //出金金额
      Adang_qian_quan_yi: '--', //当前权益
      Aaccount: '--', //可用资金
      Aping_cang_ying_kui: '--', //平仓盈亏
      Ashou_xu_fei: '--', //手续费
      Abao_zheng_jin: '--', //保证金
      Adong_jie_bao_zheng_jin: '--', //冻结保证金
      Adong_jie_zi_jin: '--', //冻结资金
      Aru_jin: '--', //入金金额
      Axin_yong_e_du: '--', //信用金额
      Akeyong: '--', //可取资金
      Achicangyingkui: '--', //持仓盈亏
      Afengxian: '--', //风险度
      Adong_jie_shou_xu_fei: '--', //冻结手续费
      Achu_jin: '--', //出金金额
      fee: '', //出金
      chicangtime: null
    };
  },
  beforeDestroy() {
    clearInterval(this.chicangtime);
    this.chicangtime = null;
  },
  mounted() {
    this.onDeal('detailed'); //当日成交
    /* 获取用户资金状态*/
    this.getusermouny();
    this.loadtime();
    /* 用户信息 */
    this.username = "(" + this.userInfo.username + ")" + this.userInfo.realname;
  },
  methods: {
    loadtime() {
      this.chicangtime = setInterval(() => {
        this.getusermouny();
      }, 1500);
    },
    pingcang() {
      if (this.holdlist.length == 0) {
        return this.$notify.error('持仓列表为空，无法平仓');
      }
      this.dialogVisible = true;
    },
    //切换
    tabbot(item, index) {
      var that = this;
      that.isindex = index;
      if (item.id == '1') {
        //交易
        that.Fkey1 = 1;
        that.isxiadan = true;
        that.is_zhong = true;
      } else if (item.id == '2') {
        //当日委托
        that.Fkey1 = 2;
        that.isxiadan = true;
        that.is_zhong = true;
      } else if (item.id == '3') {
        //当日成交
        that.Fkey1 = 3;
        that.isxiadan = true;
        that.is_zhong = true;
      } else if (item.id == '4') {
        //持仓
        that.Fkey1 = 4;
        that.isxiadan = true;
        that.is_zhong = true;
      } else if (item.id == '5') {
        //查询
        that.Fkey1 = 5;
        that.isxiadan = false;
        that.is_zhong = false;
      } else if (item.id == '6') {
        //实名认证
        that.Fkey1 = 6;
        that.isxiadan = false;
        that.is_zhong = false;
      } else if (item.id == '7') {
        //获取公告信息
        that.Fkey1 = 7;
        that.isxiadan = false;
        that.is_zhong = false;
      } else if (item.id == '8') {
        //银期转账
        that.Fkey1 = 8;
        that.isxiadan = false;
        that.is_zhong = false;
      } else if (item.id == '9') {
        //修改密码
        that.Fkey1 = 9;
        that.isxiadan = false;
        that.is_zhong = false;
      }
    },
    /* 获取用户资金状态*/
    getusermouny() {
      this.$get('addons/tf-futures/member/my-info').then(res => {
        // console.log(res,'资金状态');
        if (res.code == 200) {
          this.param = res.data;
        } else {
          console.log(res.message || '获取用户资金状态出错 ');
        }
      });
    },
    hidealert() {
      this.Fkeystu = false;
    },
    colsexiadan() {
      this.isxiadan = !this.isxiadan;
    },
    getuser() {
      //获取账户信息
      var that = this;
    },
    get_order_list_mine() {
      var that = this;
    },
    onCancel(val) {
      if (val == 1) {
        this.iscance1 = true;
        this.iscance2 = false;
      } else if (val == 2) {
        this.iscance1 = false;
        this.iscance2 = true;
      }
    },
    //全部平仓
    cloposion() {
      var that = this;
      that.dialogVisible = false;
    },
    getItemhold(item, index) {
      this.activeClass1 = index; // 把当前点击元素的index，赋值给activeClass
      this.holdid = item.id;
      this.$store.commit('set_holdid', item.id);
    },
    onepos() {
      //快速平仓
      if (!this.holdid) {
        return this.$notify.error('请选中一笔进行操作！');
      }
      var that = this;
    },
    openfan() {
      //快速反手
      if (!this.holdid) {
        return this.$notify.error('请选中一笔进行操作！');
      }
      var that = this;
    },
    //修改密码
    getmodify() {
      var that = this;
      if (that.parampass.cur_password == '') {
        return that.$notify.error('请输入当前密码！');
      }
      if (that.parampass.password == '') {
        return that.$notify.error('请输入新密码！');
      }
      if (that.parampass.password.length < 6) {
        return that.$notify.error('密码不能少于六位！');
      }
      if (that.parampass.password_confirm == '') {
        return that.$notify.error('请再次输入新密码！');
      }
      if (that.parampass.password !== that.parampass.password_confirm) {
        return that.$notify.error('两次密码输入不一致！');
      }
    },
    //我的条件单、委托
    get_order_list_condition() {
      var that = this;
    },
    getEntrust(item, index) {
      this.activeClass2 = index; // 把当前点击元素的index，赋值给activeClass
      this.condition_id = item.id;
    },
    getchengjiao(item, index) {
      this.activeClass3 = index; // 当日成交
    },
    deletecondition() {},
    //全部撤单（条件单全部删除）
    deletewhole() {},
    //获取当日成交
    onDeal(val) {},
    //最小化
    onsuo() {
      this.$store.commit('set', {
        navtopheight: 100
      });
    },
    //最大化
    onfang() {
      this.$store.commit('set', {
        navtopheight: 55
      });
    },
    /* 退出*/
    signout() {
      // window.sessionStorage.clear();
      // localStorage.clear();
      this.$confirm('确认退出系统', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(({ value }) => {
          this.$store.commit('set', {
            bottomlist: 'footnav'
          });
          this.$store.commit('set', {
            navtopheight: 100
          });
          this.$svcInvoke.setConf('_token', '');
          this.$store.commit('set', { isinclass: 2 });
          this.$router.push({
            path: '/'
          });
        })
        .catch(() => {
          this.$notify({
            type: 'info',
            message: '已取消退出'
          });
        });
    },
    //刷新
    refresh() {},
    getDatatime() {
      //获取当前时间
      var that = this;
      var time = new Date();
      that.timesin1 = time.toLocaleDateString();
    },
    /* 充值 */
    chongzhi() {
      var that = this;
      if (that.fee == '') {
        return that.$notify.error('请输入充值金额！');
      }
      that
        .$http({
          method: 'GET',
          headers: {
            'Content-Type': 'application/json; charset=UTF-8'
          },
          url: that.$serverUrl + 'charge?fee=' + that.fee
        })
        .then(res => {
          if (res.data.msg == 'success') {
            that.$notify.success('充值请求已提交！请查看相关地址支付！');
            that.alertborder = true;
            that.chongzhiurl = res.data.data;
            that.fee = '';
          } else {
            that.$notify.error(res.data.msg);
          }
        });
    },
    /* 转账提现 */
    goldyield() {
      var that = this;
      if (that.fee == '') {
        return that.$notify.error('请输入转账金额！');
      }
      that
        .$http({
          method: 'POST',
          headers: {
            'Content-Type': 'application/json; charset=UTF-8'
          },
          data: {
            fee: that.fee
          },
          url: that.$serverUrl + 'withdraw'
        })
        .then(res => {
          if (res.data.msg == 'success') {
            that.$notify.success('出金请求已提交,等待工作人员审核！');
            that.fee = '';
          } else {
            that.$notify.error(res.data.msg);
          }
        });
    },
    // 锁定事件
    locking() {
      this.$store.commit('set', {
        bottomlist: 'footlock'
      });
    }
  }
};
</script>

<style scoped>
.bott {
  height: 100%;
  padding-bottom: 30px;
  box-sizing: border-box;
  min-width: 1500px;
}

/* alert弹出框 */
.al_border {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid #000;
  position: fixed;
  top: 0px;
  left: 0px;
  background: #fff;
}

.al_border .iframe_border {
  width: 100%;
  height: calc(100vh - 50px);
}

.al_border .al_btn {
  margin: 0 auto;
  margin-top: 10px;
  width: 80px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 5px;
  background: #007f00;
  color: #fff;
}

/* 头部 */
.bott_top {
  width: 100%;
  height: 30px;
  background-color: #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 10px;
  box-sizing: border-box;
  color: #000000;
}
/* 下方盒子 */
.bott_in {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  background-color: #ffffff;
}

.imgzong {
  height: 30px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.but_s {
  width: 65px;
  height: 18px;
  line-height: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 8px;
  border-radius: 3px;
  border: #3c7fb1 solid 1px;
}

.imgdang1 {
  width: 16px;
  height: 5px;
  margin-right: 5px;
}

.imgdang {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  box-sizing: border-box;
  padding: 1px;
}

/* 下方左面 */
.bott_left {
  width: 135px;
  min-width: 135px;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  border: #7f9db9 solid 1px;
}

.bott_lef_img {
  width: 40px;
  height: 180px;
}

.bott_lef_font {
  font-size: 14px;
  height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bott_lef_font_span {
  cursor: pointer;
  height: 20px;
  line-height: 20px;
  display: block;
  color: #000000;
}

.font_bg {
  color: #ffffff;
  background-color: #3399ff;
}
/* 下方右侧 */
.bott_right {
  width: calc(100% - 140px);
  height: 100%;
  /* background-color: khaki; */
  /* display: flex; */
  /* justify-content: flex-start; */
}

.rig_xiadan {
  width: 330px;
  height: 100%;
  float: left;
  /* background-color: coral; */
}

.rig_zhong {
  float: left;
  width: 10px;
  height: 100%;
  border: #003c74 solid 1px;
  border-radius: 10px;
  margin-left: 0.15rem;
  margin-right: 0.15rem;
}

.rig_zhong:hover {
  background-image: linear-gradient(to bottom, rgb(253, 232, 186), rgb(245, 181, 54));
}

.rig_jilu {
  float: left;
  width: calc(100% - 350px);
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 2rem;
}

.transaction {
  width: 100%;
  height: 100%;
}

</style>
